<template>
  <!-- <div v-loading="loading" class="Fxpg_details" element-loading-background="rgba(0, 0, 0, 0.4)"> -->

  <!-- 数据 -->
  <!-- <div class="yyDataList"  > -->
  <div class=" riskInfo2">
    <div class="riskInfo_item2">
      <div> <img src="@/assets/imgNew/yingxiangcunzhuang.png" alt=""></div>
      <div class="inner2">
        <div class="num">
          <!-- <CountTo :startVal='startVal' :endVal='sumVillage || 0' :duration='duration2' /> -->
          {{ sumVillage || 0 }}
        </div>
        <div>受淹村庄(个)</div>
      </div>
    </div>
    <div class="riskInfo_item2">
      <div> <img src="@/assets/imgNew/yingxianghushu.png" alt=""></div>
      <div class="inner2">
        <div class="num">
          <!-- <CountTo :startVal='startVal' :endVal='sumHouse || 0' :duration='duration2' /> -->
          {{ sumHouse || 0 }}
        </div>
        <div>受淹房屋数(户)</div>
      </div>
    </div>
    <div class="riskInfo_item2">
      <div> <img src="@/assets/imgNew/yingxiangrenkou.png" alt=""></div>
      <div class="inner2">
        <div class="num">
          <!-- <CountTo :startVal='startVal' :endVal='sumPCount || 0' :duration='duration2' /> -->
          {{ sumPCount || 0 }}
        </div>
        <div>需转移人口数(人)</div>
      </div>
    </div>
    <div class="riskInfo_item2">
      <div> <img src="@/assets/imgNew/yanmomianji.png" alt=""> </div>
      <div class="inner2">
        <div class="num">
          <!-- <CountTo :startVal='startVal' :endVal='drownArea || 0' :duration='duration2' /> -->
          {{ drownArea || 0 }}
        </div>
        <div>淹没面积(万平方米)</div>
      </div>
    </div>
  </div>
  <!-- </div> -->
  <!-- </div> -->
</template>
<script>
import { GetRiskDrowningDetail } from '../../../api/xuna.js'
import CountTo from 'vue-count-to'
import { initLoad, callUIInteraction, addResponseEventListener } from '@/PixelStreaming/webrtcVideo.js'
export default {
  name: 'yytitleData',
  components: { CountTo },
  data() {
    return {
      idParams: '',
      fxpgList: {},
      loading: false,
      PionId: undefined,//选中的行

      timeList: [],
      currTime: '',
      villagelst: [],
      infrastructurelst: [],
      drownArea: 0,
      sumVillage: 0,
      sumHouse: 0,
      sumPCount: 0,
      duration2: 3600, //时长
      startVal: 0 //起始值

    }
  },
  computed: {
    basin() {
      return this.$store.getters.basin
    },
    playerTime() {
      return this.$store.getters.playerTime
    },
  },
  watch: {
    playerTime: {
      handler: function (index) {
        this.compareFlooding();
      }
    },
  },

  beforeDestroy() {
    this.$eventBus.$off('schemeFxId')
  },
  created() {
    var _this = this;
    this.$eventBus.$on('schemeFxId', res => {
      this.idParams = res
      this.getSelassessment()
    })
    window.UE_PreviewUpdate = function (res) {
      var times = res.time;
      _this.$store.dispatch('playerTime', times);
      _this.compareFlooding();
    }
  },
  mounted() {

  },
  methods: {
    //加载初始数据
    getSelassessment() {
      this.loading = true;
      var param = {
        'id': this.idParams,
        'wswscd': this.basin,
      }
      GetRiskDrowningDetail(param).then((res) => {
        this.loading = false
        if (res.isSuccess && res.data.length > 0) {
          console.log('fxpgList111', res.data);
          this.fxpgList = res.data
        } else {
          this.fxpgList = []
        }
      })
    },
    //时间轴变化
    compareFlooding() {
      var _this = this;
      console.log(this.playerTime);
      var stdt = new Date(this.playerTime);
      var fxpgList = this.fxpgList;
      var sassList = []
      for (let index = 0; index < fxpgList.length; index++) {
        const element = fxpgList[index];
        var etdt = new Date((element.key).replace("-", "/"));
        if (etdt == stdt || etdt < stdt) {
          sassList.push(element)
        }
      }
      var villagelst = [];
      var infrastructurelst = [];
      this.drownArea = 0;//淹没面积
      this.sumVillage = 0;//影响村庄
      this.sumHouse = 0;//影响户数
      this.sumPCount = 0;//影响人口数
      if (sassList.length > 0) {
        _this.drownArea = (sassList[sassList.length - 1].area/10000).toFixed(2);
        var _sassList = sassList[sassList.length - 1].value;
        _sassList.forEach(element => {
          // _this.drownArea = _this.drownArea + element.area;
          _this.sumVillage = _this.sumVillage + element.village;
          _this.sumHouse = _this.sumHouse + element.house;
          _this.sumPCount = _this.sumPCount + element.pCount;
          if (element.type == 1) {
            villagelst.push(element)
          } else {
            infrastructurelst.push(element)
          }
        });
        this.villagelst = villagelst;
        this.infrastructurelst = infrastructurelst;
      } else {
        this.drownArea = 0;
        this.sumVillage = 0;
        this.sumHouse = 0;
        this.sumPCount = 0;
        this.villagelst = [];
        this.infrastructurelst = [];
      }

      console.log(sassList);
    },
  }
}
</script>
<style lang="less" scoped>
.Fxpg_details {
  display: flex;
  flex-direction: column;
  height: 100%;

  .Fxpg_cur {
    //height: 40%;
    height: 38%;
    flex-shrink: 0;
    background: rgba(3, 34, 55, 0.39);

    .tableFXPg {
      height: calc(100% - 40px);
    }
  }
}




.riskInfo2 {
  display: flex;
  border-top: 1px solid #3F72AA;
  padding: 4px 20px 2px 20px;

  .riskInfo_item2 {
    margin-left: 30px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFEFE;
  }

  .inner2 {
    height: 100%;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .num {
      height: 30px;
      font-size: 24px;
      font-family: DIN;
      font-weight: bold;
      color: #00FFFF;
    }

    .numstyle {
      font-size: 24px;
      font-family: DIN;
      font-weight: bold;
      color: #00FFFF;
    }
  }

  .riskInfo_item2:nth-child(1) {
    height: 75px;
    margin-left: 0;
  }

}
</style>
